<template>
  <div class="app-container">
    <div class="crud-group">
      <el-select
        v-model="tableData.cmFlag"
        placeholder="请选择集群"
        type="text"
        @change="(value)=>{
          this.tableData.clusterFlag=cmList.find((item)=>item.cmFlag==value).clusterFlag
          this.handleClick({name:this.activeName})
        }"
      >
        <el-option
          v-for="item in cmList"
          :key="item.cmFlag"
          :label="item.cmName"
          :value="item.cmFlag"
        />
      </el-select>
      <!-- <el-select
        v-model="tableData.clusterFlag"
        placeholder="请选择子集群"
        type="text"
      >
        <el-option
          v-for="item in clusterList"
          :key="item.value"
          :label="item.lable"
          :value="item.value"
        />
      </el-select> -->
      <!-- <el-button
        type="primary"
        @click="getData"
      >
        搜索
      </el-button> -->
    </div>
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
    >
      <el-tab-pane
        label="HDFS"
        name="hdfs"
      >
        <template
          v-if="detailList.length>0"
        >
          <el-card
            v-for="(item,index) in detailList"
            style="width:100%"
          >
            <el-form
              :inline="true"
              size="small"
              label-width="80px"
            >
              <el-form-item label="查询时间:">
                <el-radio-group
                  v-model="listForm[index].hdfs"
                  @change="hdfsChange(index)"
                >
                  <el-radio-button
                    v-for="item in queryTime"
                    :label="item.value"
                  >{{ item.label }}</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="选择时间:">
                <el-date-picker
                  v-model="listForm[index].value"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions"
                  @change="hdfsDate(index)"
                />
              </el-form-item>
              <el-form-item
                v-if="hdfsTopList.length>0"
                label="查询名称:"
              >
                <el-select
                  v-model="listForm[index].hdfsTop"
                  placeholder="请选择名称"
                  collapse-tags
                  multiple
                >
                  <el-option
                    v-for="val in hdfsTopList[index].top"
                    :label="val"
                    :value="val"
                  />
                </el-select>
              </el-form-item>
              <el-button
                type="primary"
                @click="queryName(index)"
              >确 定</el-button>
            </el-form>
            <div
              v-if="activeName=='hdfs'"
              :id="getHdfsID(index)"
              style="width:100%;height:300px"
            />
          </el-card>
        </template>

        <el-empty
          v-else
          :image-size="200"
        />
      </el-tab-pane>

      <el-tab-pane
        label="IMPALA"
        name="impala"
      >
        <template
          v-if="impalaList.length>0"
        >
          <el-card
            v-for="(item,index) in impalaList"
            style="width:100%"
          >
            <el-form
              :inline="true"
              size="small"
              label-width="80px"
            >
              <el-form-item label="查询时间:">
                <el-radio-group
                  v-model="impalaForm[index].hdfs"
                  @change="impalaChange(index)"
                >
                  <el-radio-button
                    v-for="item in queryTime"
                    :label="item.value"
                  >{{ item.label }}</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="选择时间:">
                <el-date-picker
                  v-model="impalaForm[index].value"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions"
                  @change="impalaDate(index)"
                />
              </el-form-item>
              <el-form-item
                v-if="impalaTopList.length>0"
                label="查询名称:"
              >
                <el-select
                  v-model="impalaForm[index].hdfsTop"
                  placeholder="请选择名称"
                  collapse-tags
                  multiple
                >
                  <el-option
                    v-for="val in impalaTopList[index].top"
                    :label="val"
                    :value="val"
                  />
                </el-select>
              </el-form-item>
              <el-button
                type="primary"
                @click="impalaName(index)"
              >确 定</el-button>
            </el-form>
            <div
              v-if="activeName=='impala'"
              :id="getImpalaID(index)"
              style="width:100%;height:300px"
            />
          </el-card>

        </template>

        <el-empty
          v-else
          :image-size="200"
        />
      </el-tab-pane>

      <el-tab-pane
        label="HIVE"
        name="hive"
      >
        <template
          v-if="hiveList.length>0"
        >
          <el-card
            v-for="(item,index) in hiveList"
            style="width:100%"
          >
            <el-form
              :inline="true"
              size="small"
              label-width="80px"
            >
              <el-form-item label="查询时间:">
                <el-radio-group
                  v-model="hiveForm[index].hdfs"
                  @change="hiveChange(index)"
                >
                  <el-radio-button
                    v-for="item in queryTime"
                    :label="item.value"
                  >{{ item.label }}</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="选择时间:">
                <el-date-picker
                  v-model="hiveForm[index].value"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions"
                  @change="hiveDate(index)"
                />
              </el-form-item>
              <el-form-item
                v-if="hiveTopList.length>0"
                label="查询名称:"
              >
                <el-select
                  v-model="hiveForm[index].hdfsTop"
                  placeholder="请选择名称"
                  collapse-tags
                  multiple
                >
                  <el-option
                    v-for="val in hiveTopList[index].top"
                    :label="val"
                    :value="val"
                  />
                </el-select>
              </el-form-item>
              <el-button
                type="primary"
                @click="hiveName(index)"
              >确 定</el-button>
            </el-form>
            <div
              v-if="activeName=='hive'"
              :id="getHiveID(index)"
              style="width:100%;height:300px"
            />
          </el-card>
        </template>

        <el-empty
          v-else
          :image-size="200"
        />
      </el-tab-pane>

      <el-tab-pane
        label="YARN"
        name="yarn"
      >
        <template
          v-if="yarnList.length>0"
        >
          <el-card
            v-for="(item,index) in yarnList"
            style="width:100%"
          >
            <el-form
              :inline="true"
              size="small"
              label-width="80px"
            >
              <el-form-item label="查询时间:">
                <el-radio-group
                  v-model="yarnForm[index].hdfs"
                  @change="yarnChange(index)"
                >
                  <el-radio-button
                    v-for="item in queryTime"
                    :label="item.value"
                  >{{ item.label }}</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="选择时间:">
                <el-date-picker
                  v-model="yarnForm[index].value"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions"
                  @change="yarnDate(index)"
                />
              </el-form-item>
              <el-form-item
                v-if="yarnTopList.length>0"
                label="查询名称:"
              >
                <el-select
                  v-model="yarnForm[index].hdfsTop"
                  placeholder="请选择名称"
                  collapse-tags
                  multiple
                >
                  <el-option
                    v-for="val in yarnTopList[index].top"
                    :label="val"
                    :value="val"
                  />
                </el-select>
              </el-form-item>
              <el-button
                type="primary"
                @click="yarnName(index)"
              >确 定</el-button>
            </el-form>
            <div
              v-if="activeName=='yarn'"
              :id="getYarnID(index)"
              style="width:100%;height:300px"
            />
          </el-card>
        </template>

        <el-empty
          v-else
          :image-size="200"
        />
      </el-tab-pane>

      <el-tab-pane
        label="HBASE"
        name="hbase"
      >
        <template
          v-if="hbaseList.length>0"
        >
          <el-card
            v-for="(item,index) in hbaseList"
            style="width:100%"
          >
            <el-form
              :inline="true"
              size="small"
              label-width="80px"
            >
              <el-form-item label="查询时间:">
                <el-radio-group
                  v-model="hbaseForm[index].hdfs"
                  @change="hbaseChange(index)"
                >
                  <el-radio-button
                    v-for="item in queryTime"
                    :label="item.value"
                  >{{ item.label }}</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="选择时间:">
                <el-date-picker
                  v-model="hbaseForm[index].value"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions"
                  @change="hbaseDate(index)"
                />
              </el-form-item>
              <el-form-item
                v-if="hbaseTopList.length>0"
                label="查询名称:"
              >
                <el-select
                  v-model="hbaseForm[index].hdfsTop"
                  placeholder="请选择名称"
                  collapse-tags
                  multiple
                >
                  <el-option
                    v-for="val in hbaseTopList[index].top"
                    :label="val"
                    :value="val"
                  />
                </el-select>
              </el-form-item>
              <el-button
                type="primary"
                @click="hbaseName(index)"
              >确 定</el-button>
            </el-form>
            <div
              v-if="activeName=='hbase'"
              :id="getHbaseID(index)"
              style="width:100%;height:300px"
            />
          </el-card>
        </template>

        <el-empty
          v-else
          :image-size="200"
        />
      </el-tab-pane>

      <el-tab-pane
        label="ZOOKEEPER"
        name="zookeeper"
      >
        <template
          v-if="zookeeperList.length>0"
        >
          <el-card
            v-for="(item,index) in zookeeperList"
            style="width:100%"
          >
            <el-form
              :inline="true"
              size="small"
              label-width="80px"
            >
              <el-form-item label="查询时间:">
                <el-radio-group
                  v-model="zookeeperForm[index].hdfs"
                  @change="zookeeperChange(index)"
                >
                  <el-radio-button
                    v-for="item in queryTime"
                    :label="item.value"
                  >{{ item.label }}</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="选择时间:">
                <el-date-picker
                  v-model="zookeeperForm[index].value"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions"
                  @change="zookeeperDate(index)"
                />
              </el-form-item>
              <el-form-item
                v-if="zookeeperTopList.length>0"
                label="查询名称:"
              >
                <el-select
                  v-model="zookeeperForm[index].hdfsTop"
                  placeholder="请选择名称"
                  collapse-tags
                  multiple
                >
                  <el-option
                    v-for="val in zookeeperTopList[index].top"
                    :label="val"
                    :value="val"
                  />
                </el-select>
              </el-form-item>
              <el-button
                type="primary"
                @click="zookeeperName(index)"
              >确 定</el-button>
            </el-form>
            <div
              v-if="activeName=='zookeeper'"
              :id="getZookeeperID(index)"
              style="width:100%;height:300px"
            />
          </el-card>
        </template>

        <el-empty
          v-else
          :image-size="200"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import parameter from '@/api/phaseTwo/parameter.js'
import { timeAxisLabel } from '@/utils/chartOption'
import monitor from '@/api/monitor/monitor'

export default {
  data() {
    return {
      tableData: {
        cmFlag: '',
        clusterFlag: ''
      },
      ckg: {},
      activeName: 'hdfs',
      javaMemory: '1',
      pickerOptions: {
        disabledDate(time) {
          const curDate = (new Date()).getTime()
          const three = 30 * 24 * 3600 * 1000
          const threeMonths = curDate - three
          return time.getTime() > Date.now() || time.getTime() < threeMonths
        }
      },
      queryTime: [{label: '1小时', value: '1'}, {label: '6小时', value: '6'}, {label: '12小时', value: '12'}, {label: '1天', value: '24'}, {label: '3天', value: '72'}, {label: '7天', value: '168'}],
      hdfsTopList: [],
      impalaTopList: [],
      hiveTopList: [],
      yarnTopList: [],
      hbaseTopList: [],
      zookeeperTopList: [],
      listForm: [{hdfs: '1', value: '', hdfsTop: []}],
      impalaForm: [{hdfs: '1', value: '', hdfsTop: []}],
      hiveForm: [{hdfs: '1', value: '', hdfsTop: []}],
      yarnForm: [{hdfs: '1', value: '', hdfsTop: []}],
      hbaseForm: [{hdfs: '1', value: '', hdfsTop: []}],
      zookeeperForm: [{hdfs: '1', value: '', hdfsTop: []}],
      detailList: [],
      impalaList: [],
      hiveList: [],
      yarnList: [],
      hbaseList: [],
      zookeeperList: [],
      dataList: [],
      targetList: [],
      typeName: 'hdfs',
      cmList: []
    }
  },
  async mounted() {
    await this.selAllCm()
    if (this.$route.query.clusterIndex) {
      const index = this.$route.query.clusterIndex
      this.tableData.cmFlag = this.cmList[index].cmFlag
      this.tableData.clusterFlag = this.cmList[index].clusterFlag
    }
    if (this.$route.query.name) {
      this.activeName = this.$route.query.name
    }
    this.handleClick({name: this.activeName})
  },
  methods: {
    // async getData() {
    //   await this.getTargetDetail(0)
    //   this.getTargetTop(0)
    //   this.getHdfsID()
    // },
    async selAllCm() {
      const centerId = sessionStorage.getItem('sysKernelId')
      const reqData = { 'centerId': centerId }
      const res = await monitor.selAllCm(reqData)
      this.cmList = res
      this.tableData.cmFlag = res[0].cmFlag
      this.tableData.clusterFlag = res[0].clusterFlag
    },
    goDetail() {
      this.$emit('keyParameter', '0')
    },
    queryName(index) {
      this.getSoleMap(index)
    },
    impalaName(index) {
      this.getImpalaMap(index)
    },
    hiveName(index) {
      this.getHiveMap(index)
    },
    yarnName(index) {
      this.getYarnMap(index)
    },
    hbaseName(index) {
      this.getHbaseMap(index)
    },
    zookeeperName(index) {
      this.getZookeeperMap(index)
    },
    async handleClick(tab, event) {
      if (tab.name === 'hdfs') {
        this.typeName = 'hdfs'
        this.getHdfsID()
        await this.getTargetDetail(0)
        await this.getTargetTop(0)
      } else if (tab.name === 'impala') {
        this.typeName = 'impala'
        this.getImpalaID()
        await this.getImpalaDetail(0)
        await this.getImpalaTop(0)
      } else if (tab.name === 'hive') {
        this.typeName = 'hive'
        this.getHiveID()
        await this.getHiveDetail(0)
        await this.getHiveTop(0)
      } else if (tab.name === 'yarn') {
        this.typeName = 'yarn'
        this.getYarnID()
        await this.getYarnDetail(0)
        await this.getYarnTop(0)
      } else if (tab.name === 'hbase') {
        this.typeName = 'hbase'
        this.getHbaseID()
        await this.getHbaseDetail(0)
        await this.getHbaseTop(0)
      } else if (tab.name === 'zookeeper') {
        this.typeName = 'zooKeeper'
        this.getZookeeperID()
        await this.getZookeeperDetail(0)
        await this.getZookeeperTop(0)
      }
    },
    hdfsChange(index) {
      // 清空图表
      const block = echarts.init(document.getElementById('hdfs' + index))
      block.clear()
      // 选择固定时间清空时间选择器
      this.listForm[index].value = ''
      this.getSoleMap(index)
    },
    hdfsDate(index) {
      // 清空图表
      const block = echarts.init(document.getElementById('hdfs' + index))
      block.clear()
      // 选择时间选择器清空固定时间
      this.listForm[index].hdfs = ''
      this.getSoleMap(index)
    },
    impalaChange(index) {
      const impala = echarts.init(document.getElementById('impala' + index))
      impala.clear()
      this.impalaForm[index].value = ''
      this.getImpalaMap(index)
    },
    impalaDate(index) {
      const impala = echarts.init(document.getElementById('impala' + index))
      impala.clear()
      this.impalaForm[index].hdfs = ''
      this.getImpalaMap(index)
    },
    hiveChange(index) {
      const hiveServer = echarts.init(document.getElementById('hive' + index))
      hiveServer.clear()
      this.hiveForm[index].value = ''
      this.getHiveMap(index)
    },
    hiveDate(index) {
      const hiveServer = echarts.init(document.getElementById('hive' + index))
      hiveServer.clear()
      this.hiveForm[index].hdfs = ''
      this.getHiveMap(index)
    },
    yarnChange(index) {
      const yarn = echarts.init(document.getElementById('yarn' + index))
      yarn.clear()
      this.yarnForm[index].value = ''
      this.getYarnMap(index)
    },
    yarnDate(index) {
      const yarn = echarts.init(document.getElementById('yarn' + index))
      yarn.clear()
      this.yarnForm[index].hdfs = ''
      this.getYarnMap(index)
    },
    hbaseChange(index) {
      const hbase = echarts.init(document.getElementById('hbase' + index))
      hbase.clear()
      this.hbaseForm[index].value = ''
      this.getHbaseMap(index)
    },
    hbaseDate(index) {
      const hbase = echarts.init(document.getElementById('hbase' + index))
      hbase.clear()
      this.hbaseForm[index].hdfs = ''
      this.getHbaseMap(index)
    },
    zookeeperChange(index) {
      const zookeeper = echarts.init(document.getElementById('zookeeper' + index))
      zookeeper.clear()
      this.zookeeperForm[index].value = ''
      this.getZookeeperMap(index)
    },
    zookeeperDate(index) {
      const zookeeper = echarts.init(document.getElementById('zookeeper' + index))
      zookeeper.clear()
      this.zookeeperForm[index].hdfs = ''
      this.getZookeeperMap(index)
    },
    // hdfs
    async getTargetDetail(index) {
      const obj = {cmFlag: this.tableData.cmFlag, clusterFlag: this.tableData.clusterFlag, serviceType: this.typeName, hourSum: this.listForm[index].hdfs, hourStartTime: this.listForm[index].value[0], hourEndTime: this.listForm[0].value[1]}
      this.targetList = []
      this.dataList = []
      const res = await parameter.getTargetDetail(obj)
      this.detailList = res
      const valueList = []
      res.forEach((item) => {
        this.listForm.push({hdfs: '168', value: '', hdfsTop: []})
        for (const key in item) {
          this.targetList.push(key)
          valueList.push(item[key])
        }
      })
      await this.$nextTick()
      for (var i = 0; i < this.detailList.length; i++) {
        this.dataList.push(echarts.init(document.getElementById('hdfs' + i)))
        const title = valueList[i][0].targetName
        const nameList = []
        const seriesData = []
        valueList[i].forEach((item) => {
          nameList.push(item.entityName)
          const xZhou = []
          item.cmTargetReportModellist.forEach((val) => {
            const data = []
            data.push(val.createTime)
            data.push(val.targetValue)
            xZhou.push(data)
          })
          seriesData.push({
            type: 'line',
            name: item.entityName,
            data: xZhou
          })
        })
        this.dataList[i].setOption({
          title: {
            text: title
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: nameList,
            type: 'scroll',
            orient: 'vertical',
            left: '80%'
          },
          grid: {width: '65%'},
          toolbox: {

          },
          calculable: true,
          xAxis: {
            type: 'time',
            axisLabel: timeAxisLabel
          },
          yAxis: {
            type: 'value'
          },
          series: seriesData
        })
      }
    },
    getHdfsID(index) {
      return 'hdfs' + index
    },
    getSoleMap(index) {
      const obj = {cmFlag: this.tableData.cmFlag, clusterFlag: this.tableData.clusterFlag, targetCode: this.targetList[index], hourSum: this.listForm[index].hdfs, hourStartTime: this.listForm[index].value[0], hourEndTime: this.listForm[index].value[1], serviceType: this.typeName, entityNames: this.listForm[index].hdfsTop}
      parameter.getMap(obj).then((res) => {
        const title = res[0].targetName
        let xZhou = []
        const nameList = []
        const seriesData = []
        res.forEach((item) => {
          nameList.push(item.entityName)
          xZhou = []
          item.cmTargetReportModellist.forEach((val) => {
            const data = []
            data.push(val.createTime)
            data.push(val.targetValue)
            xZhou.push(data)
          })
          seriesData.push({
            type: 'line',
            name: item.entityName,
            data: xZhou
          })
        })
        var myChart = echarts.init(document.getElementById('hdfs' + index))
        var option
        option = {
          title: {
            text: title
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: nameList,
            type: 'scroll',
            orient: 'vertical',
            left: '80%'
          },
          grid: {width: '65%'},
          toolbox: {

          },
          calculable: true,
          xAxis: {
            type: 'time',
            axisLabel: timeAxisLabel
          },
          yAxis: {
            type: 'value'
          },
          series: seriesData
        }
        option && myChart.setOption(option, true)
      })
    },
    async getTargetTop(index) {
      this.hdfsTopList = []
      const obj = {cmFlag: this.tableData.cmFlag, clusterFlag: this.tableData.clusterFlag, serviceType: this.typeName, hourSum: this.listForm[index].hdfs, hourStartTime: this.listForm[index].value[0], hourEndTime: this.listForm[0].value[1]}
      parameter.getTargetTop(obj).then((res) => {
        res.forEach((item, num) => {
          for (const key in item) {
            this.hdfsTopList.push({top: item[key]})
          }
          this.listForm[num].hdfsTop = this.hdfsTopList[num].top
        })
      })
    },
    // getHdfsSoleTop(index){
    //   this.hdfsTopList=[]
    //   let obj={cmFlag:this.tableData.cmFlag,clusterFlag:this.tableData.clusterFlag,serviceType:this.typeName,hourSum:this.listForm[index].hdfs,hourStartTime:this.listForm[index].value[0],hourEndTime:this.listForm[0].value[1],targetCode:this.targetList[index]}
    //   parameter.getTop(obj).then((res)=>{
    //     this.hdfsTopList=res
    //     this.listForm[index].hdfsTop=this.hdfsTopList
    //   })
    // },
    // impala
    async getImpalaDetail(index) {
      const obj = {cmFlag: this.tableData.cmFlag, clusterFlag: this.tableData.clusterFlag, serviceType: this.typeName, hourSum: this.impalaForm[index].hdfs, hourStartTime: this.impalaForm[index].value[0], hourEndTime: this.impalaForm[0].value[1]}
      this.targetList = []
      this.dataList = []
      const res = await parameter.getTargetDetail(obj)
      this.impalaList = res
      const valueList = []
      res.forEach((item) => {
        this.impalaForm.push({hdfs: '168', value: '', hdfsTop: []})
        for (const key in item) {
          this.targetList.push(key)
          valueList.push(item[key])
        }
      })
      await this.$nextTick()
      for (var i = 0; i < this.impalaList.length; i++) {
        this.dataList.push(echarts.init(document.getElementById('impala' + i)))
        const title = valueList[i][0].targetName
        const nameList = []
        const seriesData = []
        valueList[i].forEach((item) => {
          nameList.push(item.entityName)
          const xZhou = []
          item.cmTargetReportModellist.forEach((val) => {
            const data = []
            data.push(val.createTime)
            data.push(val.targetValue)
            xZhou.push(data)
          })
          seriesData.push({
            type: 'line',
            name: item.entityName,
            data: xZhou
          })
        })
        this.dataList[i].setOption({
          title: {
            text: title
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: nameList,
            type: 'scroll',
            orient: 'vertical',
            left: '80%'
          },
          grid: {width: '65%'},
          toolbox: {

          },
          calculable: true,
          xAxis: {
            type: 'time',
            axisLabel: timeAxisLabel
          },
          yAxis: {
            type: 'value'
          },
          series: seriesData
        })
      }
    },
    getImpalaID(index) {
      return 'impala' + index
    },
    getImpalaMap(index) {
      const obj = {cmFlag: this.tableData.cmFlag, clusterFlag: this.tableData.clusterFlag, targetCode: this.targetList[index], hourSum: this.impalaForm[index].hdfs, hourStartTime: this.impalaForm[index].value[0], hourEndTime: this.impalaForm[index].value[1], serviceType: this.typeName, entityNames: this.impalaForm[index].hdfsTop}
      parameter.getMap(obj).then((res) => {
        const title = res[0].targetName
        const nameList = []
        const seriesData = []
        res.forEach((item) => {
          nameList.push(item.entityName)
          const xZhou = []
          item.cmTargetReportModellist.forEach((val) => {
            const data = []
            data.push(val.createTime)
            data.push(val.targetValue)
            xZhou.push(data)
          })
          seriesData.push({
            type: 'line',
            name: item.entityName,
            data: xZhou
          })
        })
        var myChart = echarts.init(document.getElementById('impala' + index))
        var option
        option = {
          title: {
            text: title
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: nameList,
            type: 'scroll',
            orient: 'vertical',
            left: '80%'
          },
          grid: {width: '65%'},
          toolbox: {

          },
          calculable: true,
          xAxis: {
            type: 'time',
            axisLabel: timeAxisLabel
          },
          yAxis: {
            type: 'value'
          },
          series: seriesData
        }
        option && myChart.setOption(option, true)
      })
    },
    async getImpalaTop(index) {
      this.impalaTopList = []
      const obj = {cmFlag: this.tableData.cmFlag, clusterFlag: this.tableData.clusterFlag, serviceType: this.typeName, hourSum: this.impalaForm[index].hdfs, hourStartTime: this.impalaForm[index].value[0], hourEndTime: this.impalaForm[0].value[1]}
      parameter.getTargetTop(obj).then((res) => {
        res.forEach((item, num) => {
          for (const key in item) {
            this.impalaTopList.push({top: item[key]})
          }
          this.impalaForm[num].hdfsTop = this.impalaTopList[num].top
        })
      })
    },
    // getImpalaSoleTop(index){
    //   this.impalaTopList=[]
    //   let obj={cmFlag:this.tableData.cmFlag,clusterFlag:this.tableData.clusterFlag,serviceType:this.typeName,hourSum:this.impalaForm[index].hdfs,hourStartTime:this.impalaForm[index].value[0],hourEndTime:this.impalaForm[0].value[1],targetCode:this.targetList[index]}
    //   parameter.getTop(obj).then((res)=>{
    //     this.impalaTopList=res
    //     this.impalaForm[index].hdfsTop=this.impalaTopList
    //   })
    // },
    // hive
    async getHiveDetail(index) {
      const obj = {cmFlag: this.tableData.cmFlag, clusterFlag: this.tableData.clusterFlag, serviceType: this.typeName, hourSum: this.hiveForm[index].hdfs, hourStartTime: this.hiveForm[index].value[0], hourEndTime: this.hiveForm[0].value[1]}
      this.targetList = []
      this.dataList = []
      const res = await parameter.getTargetDetail(obj)
      this.hiveList = res
      const valueList = []
      res.forEach((item) => {
        this.hiveForm.push({hdfs: '168', value: '', hdfsTop: []})
        for (const key in item) {
          this.targetList.push(key)
          valueList.push(item[key])
        }
      })
      await this.$nextTick()
      for (var i = 0; i < this.hiveList.length; i++) {
        this.dataList.push(echarts.init(document.getElementById('hive' + i)))
        const title = valueList[i][0].targetName
        let xZhou = []
        const nameList = []
        const seriesData = []
        valueList[i].forEach((item) => {
          nameList.push(item.entityName)
          xZhou = []
          item.cmTargetReportModellist.forEach((val) => {
            const data = []
            data.push(val.createTime)
            data.push(val.targetValue)
            xZhou.push(data)
          })
          seriesData.push({
            type: 'line',
            name: item.entityName,
            data: xZhou
          })
        })
        this.dataList[i].setOption({
          title: {
            text: title
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: nameList,
            type: 'scroll',
            orient: 'vertical',
            left: '80%'
          },
          grid: {width: '65%'},
          toolbox: {

          },
          calculable: true,
          xAxis: {
            type: 'time',
            axisLabel: timeAxisLabel
          },
          yAxis: {
            type: 'value'
          },
          series: seriesData
        })
      }
    },
    getHiveID(index) {
      return 'hive' + index
    },
    getHiveMap(index) {
      const obj = {cmFlag: this.tableData.cmFlag, clusterFlag: this.tableData.clusterFlag, targetCode: this.targetList[index], hourSum: this.hiveForm[index].hdfs, hourStartTime: this.hiveForm[index].value[0], hourEndTime: this.hiveForm[index].value[1], serviceType: this.typeName, entityNames: this.hiveForm[index].hdfsTop}
      parameter.getMap(obj).then((res) => {
        const title = res[0].targetName
        const nameList = []
        const seriesData = []
        res.forEach((item) => {
          nameList.push(item.entityName)
          const xZhou = []
          item.cmTargetReportModellist.forEach((val) => {
            const data = []
            data.push(val.createTime)
            data.push(val.targetValue)
            xZhou.push(data)
          })
          seriesData.push({
            type: 'line',
            name: item.entityName,
            data: xZhou
          })
        })
        var myChart = echarts.init(document.getElementById('hive' + index))
        var option
        option = {
          title: {
            text: title
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: nameList,
            type: 'scroll',
            orient: 'vertical',
            left: '80%'
          },
          grid: {width: '65%'},
          toolbox: {

          },
          calculable: true,
          xAxis: {
            type: 'time',
            axisLabel: timeAxisLabel
          },
          yAxis: {
            type: 'value'
          },
          series: seriesData
        }
        option && myChart.setOption(option, true)
      })
    },
    async getHiveTop(index) {
      this.hiveTopList = []
      const obj = {cmFlag: this.tableData.cmFlag, clusterFlag: this.tableData.clusterFlag, serviceType: this.typeName, hourSum: this.hiveForm[index].hdfs, hourStartTime: this.hiveForm[index].value[0], hourEndTime: this.hiveForm[0].value[1]}
      parameter.getTargetTop(obj).then((res) => {
        res.forEach((item, num) => {
          for (const key in item) {
            this.hiveTopList.push({top: item[key]})
          }
          this.hiveForm[num].hdfsTop = this.hiveTopList[num].top
        })
      })
    },
    // getHiveSoleTop(index){
    //   this.hiveTopList=[]
    //   let obj={cmFlag:this.tableData.cmFlag,clusterFlag:this.tableData.clusterFlag,serviceType:this.typeName,hourSum:this.hiveForm[index].hdfs,hourStartTime:this.hiveForm[index].value[0],hourEndTime:this.hiveForm[0].value[1],targetCode:this.targetList[index]}
    //   parameter.getTop(obj).then((res)=>{
    //     this.hiveTopList=res
    //     this.hiveForm[index].hdfsTop=this.hiveTopList
    //   })
    // },
    // yarn
    async getYarnDetail(index) {
      this.getYarnID()
      const obj = {cmFlag: this.tableData.cmFlag, clusterFlag: this.tableData.clusterFlag, serviceType: this.typeName, hourSum: this.yarnForm[index].hdfs, hourStartTime: this.yarnForm[index].value[0], hourEndTime: this.yarnForm[0].value[1]}
      this.targetList = []
      this.dataList = []
      const res = await parameter.getTargetDetail(obj)
      this.yarnList = res
      const valueList = []
      res.forEach((item) => {
        this.yarnForm.push({hdfs: '168', value: '', hdfsTop: []})
        for (const key in item) {
          this.targetList.push(key)
          valueList.push(item[key])
        }
      })
      await this.$nextTick()
      for (var i = 0; i < this.yarnList.length; i++) {
        this.dataList.push(echarts.init(document.getElementById('yarn' + i)))
        const title = valueList[i][0].targetName
        const nameList = []
        const seriesData = []
        valueList[i].forEach((item) => {
          nameList.push(item.entityName)
          const xZhou = []
          item.cmTargetReportModellist.forEach((val) => {
            const data = []
            data.push(val.createTime)
            data.push(val.targetValue)
            xZhou.push(data)
          })
          seriesData.push({
            type: 'line',
            name: item.entityName,
            data: xZhou
          })
        })
        this.dataList[i].setOption({
          title: {
            text: title
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: nameList,
            type: 'scroll',
            orient: 'vertical',
            left: '80%'
          },
          grid: {width: '65%'},
          toolbox: {

          },
          calculable: true,
          xAxis: {
            type: 'time',
            axisLabel: timeAxisLabel
          },
          yAxis: {
            type: 'value'
          },
          series: seriesData
        })
      }
    },
    getYarnID(index) {
      return 'yarn' + index
    },
    getYarnMap(index) {
      const obj = {cmFlag: this.tableData.cmFlag, clusterFlag: this.tableData.clusterFlag, targetCode: this.targetList[index], hourSum: this.yarnForm[index].hdfs, hourStartTime: this.yarnForm[index].value[0], hourEndTime: this.yarnForm[index].value[1], serviceType: this.typeName, entityNames: this.yarnForm[index].hdfsTop}
      parameter.getMap(obj).then((res) => {
        const title = res[0].targetName
        const nameList = []
        const seriesData = []
        res.forEach((item) => {
          nameList.push(item.entityName)
          const xZhou = []
          item.cmTargetReportModellist.forEach((val) => {
            const data = []
            data.push(val.createTime)
            data.push(val.targetValue)
            xZhou.push(data)
          })
          seriesData.push({
            type: 'line',
            name: item.entityName,
            data: xZhou
          })
        })
        var myChart = echarts.init(document.getElementById('yarn' + index))
        var option
        option = {
          title: {
            text: title
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: nameList,
            type: 'scroll',
            orient: 'vertical',
            left: '80%'
          },
          grid: {width: '65%'},
          toolbox: {

          },
          calculable: true,
          xAxis: {
            type: 'time',
            axisLabel: timeAxisLabel
          },
          yAxis: {
            type: 'value'
          },
          series: seriesData
        }
        option && myChart.setOption(option, true)
      })
    },
    async getYarnTop(index) {
      this.yarnTopList = []
      const obj = {cmFlag: this.tableData.cmFlag, clusterFlag: this.tableData.clusterFlag, serviceType: this.typeName, hourSum: this.yarnForm[index].hdfs, hourStartTime: this.yarnForm[index].value[0], hourEndTime: this.yarnForm[0].value[1]}
      parameter.getTargetTop(obj).then((res) => {
        res.forEach((item, num) => {
          for (const key in item) {
            this.yarnTopList.push({top: item[key]})
          }
          this.yarnForm[num].hdfsTop = this.yarnTopList[num].top
        })
      })
    },
    // getYarnSoleTop(index){
    //   this.yarnTopList=[]
    //   let obj={cmFlag:this.tableData.cmFlag,clusterFlag:this.tableData.clusterFlag,serviceType:this.typeName,hourSum:this.yarnForm[index].hdfs,hourStartTime:this.yarnForm[index].value[0],hourEndTime:this.yarnForm[0].value[1],targetCode:this.targetList[index]}
    //   parameter.getTop(obj).then((res)=>{
    //     this.yarnTopList=res
    //     this.yarnForm[index].hdfsTop=this.yarnTopList
    //   })
    // },
    // hbase
    async getHbaseDetail(index) {
      const obj = {cmFlag: this.tableData.cmFlag, clusterFlag: this.tableData.clusterFlag, serviceType: this.typeName, hourSum: this.hbaseForm[index].hdfs, hourStartTime: this.hbaseForm[index].value[0], hourEndTime: this.hbaseForm[0].value[1]}
      this.targetList = []
      this.dataList = []
      const res = await parameter.getTargetDetail(obj)
      this.hbaseList = res
      const valueList = []
      res.forEach((item) => {
        this.hbaseForm.push({hdfs: '168', value: '', hdfsTop: []})
        for (const key in item) {
          this.targetList.push(key)
          valueList.push(item[key])
        }
      })
      await this.$nextTick()
      for (var i = 0; i < this.hbaseList.length; i++) {
        this.dataList.push(echarts.init(document.getElementById('hbase' + i)))
        const title = valueList[i][0].targetName
        const nameList = []
        const seriesData = []
        valueList[i].forEach((item) => {
          nameList.push(item.entityName)
          const xZhou = []
          item.cmTargetReportModellist.forEach((val) => {
            const data = []
            data.push(val.createTime)
            data.push(val.targetValue)
            xZhou.push(data)
          })
          seriesData.push({
            type: 'line',
            name: item.entityName,
            data: xZhou
          })
        })
        this.dataList[i].setOption({
          title: {
            text: title
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: nameList,
            type: 'scroll',
            orient: 'vertical',
            left: '80%'
          },
          grid: {width: '65%'},
          toolbox: {
          },
          calculable: true,
          xAxis: {
            type: 'time',
            axisLabel: timeAxisLabel
          },
          yAxis: {
            type: 'value'
          },
          series: seriesData
        })
      }
    },
    getHbaseID(index) {
      return 'hbase' + index
    },
    getHbaseMap(index) {
      const obj = {cmFlag: this.tableData.cmFlag, clusterFlag: this.tableData.clusterFlag, targetCode: this.targetList[index], hourSum: this.hbaseForm[index].hdfs, hourStartTime: this.hbaseForm[index].value[0], hourEndTime: this.hbaseForm[index].value[1], serviceType: this.typeName, entityNames: this.hbaseForm[index].hdfsTop}
      parameter.getMap(obj).then((res) => {
        const title = res[0].targetName
        const nameList = []
        const seriesData = []
        res.forEach((item) => {
          nameList.push(item.entityName)
          const xZhou = []
          item.cmTargetReportModellist.forEach((val) => {
            const data = []
            data.push(val.createTime)
            data.push(val.targetValue)
            xZhou.push(data)
          })
          seriesData.push({
            type: 'line',
            name: item.entityName,
            data: xZhou
          })
        })
        var myChart = echarts.init(document.getElementById('hbase' + index))
        var option
        option = {
          title: {
            text: title
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: nameList,
            type: 'scroll',
            orient: 'vertical',
            left: '80%'
          },
          grid: {width: '65%'},
          toolbox: {

          },
          calculable: true,
          xAxis: {
            type: 'time',
            axisLabel: timeAxisLabel
          },
          yAxis: {
            type: 'value'
          },
          series: seriesData
        }
        option && myChart.setOption(option, true)
      })
    },
    async getHbaseTop(index) {
      this.hbaseTopList = []
      const obj = {cmFlag: this.tableData.cmFlag, clusterFlag: this.tableData.clusterFlag, serviceType: this.typeName, hourSum: this.hbaseForm[index].hdfs, hourStartTime: this.hbaseForm[index].value[0], hourEndTime: this.hbaseForm[0].value[1]}
      parameter.getTargetTop(obj).then((res) => {
        res.forEach((item, num) => {
          for (const key in item) {
            this.hbaseTopList.push({top: item[key]})
          }
          this.hbaseForm[num].hdfsTop = this.hbaseTopList[num].top
        })
      })
    },
    // getHbaseSoleTop(index){
    //   this.hbaseTopList=[]
    //   let obj={cmFlag:this.tableData.cmFlag,clusterFlag:this.tableData.clusterFlag,serviceType:this.typeName,hourSum:this.hbaseForm[index].hdfs,hourStartTime:this.hbaseForm[index].value[0],hourEndTime:this.hbaseForm[0].value[1],targetCode:this.targetList[index]}
    //   parameter.getTop(obj).then((res)=>{
    //     this.hbaseTopList=res
    //     this.hbaseForm[index].hdfsTop=this.hbaseTopList
    //   })
    // },
    // zookeeper
    async getZookeeperDetail(index) {
      const obj = {cmFlag: this.tableData.cmFlag, clusterFlag: this.tableData.clusterFlag, serviceType: this.typeName, hourSum: this.zookeeperForm[index].hdfs, hourStartTime: this.zookeeperForm[index].value[0], hourEndTime: this.zookeeperForm[0].value[1]}
      this.targetList = []
      this.dataList = []
      const res = await parameter.getTargetDetail(obj)
      this.zookeeperList = res
      const valueList = []
      res.forEach((item) => {
        this.zookeeperForm.push({hdfs: '168', value: '', hdfsTop: []})
        for (const key in item) {
          this.targetList.push(key)
          valueList.push(item[key])
        }
      })
      await this.$nextTick()
      for (var i = 0; i < this.zookeeperList.length; i++) {
        this.dataList.push(echarts.init(document.getElementById('zookeeper' + i)))
        const title = valueList[i][0].targetName
        const nameList = []
        const seriesData = []
        valueList[i].forEach((item) => {
          nameList.push(item.entityName)
          const xZhou = []
          item.cmTargetReportModellist.forEach((val) => {
            const data = []
            data.push(val.createTime)
            data.push(val.targetValue)
            xZhou.push(data)
          })
          seriesData.push({
            type: 'line',
            name: item.entityName,
            data: xZhou
          })
        })
        this.dataList[i].setOption({
          title: {
            text: title
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: nameList,
            type: 'scroll',
            orient: 'vertical',
            left: '80%'
          },
          grid: {width: '65%'},
          toolbox: {

          },
          calculable: true,
          xAxis: {
            type: 'time',
            axisLabel: timeAxisLabel
          },
          yAxis: {
            type: 'value'
          },
          series: seriesData
        })
      }
    },
    getZookeeperID(index) {
      return 'zookeeper' + index
    },
    getZookeeperMap(index) {
      const obj = {cmFlag: this.tableData.cmFlag, clusterFlag: this.tableData.clusterFlag, targetCode: this.targetList[index], hourSum: this.zookeeperForm[index].hdfs, hourStartTime: this.zookeeperForm[index].value[0], hourEndTime: this.zookeeperForm[index].value[1], serviceType: this.typeName, entityNames: this.zookeeperForm[index].hdfsTop}
      parameter.getMap(obj).then((res) => {
        const title = res[0].targetName
        const nameList = []
        const seriesData = []
        res.forEach((item) => {
          nameList.push(item.entityName)
          const xZhou = []
          item.cmTargetReportModellist.forEach((val) => {
            const data = []
            data.push(val.createTime)
            data.push(val.targetValue)
            xZhou.push(data)
          })
          seriesData.push({
            type: 'line',
            name: item.entityName,
            data: xZhou
          })
        })
        var myChart = echarts.init(document.getElementById('zookeeper' + index))
        var option
        option = {
          title: {
            text: title
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: nameList,
            type: 'scroll',
            orient: 'vertical',
            left: '80%'
          },
          grid: {width: '65%'},
          toolbox: {

          },
          calculable: true,
          xAxis: {
            type: 'time',
            axisLabel: timeAxisLabel
          },
          yAxis: {
            type: 'value'
          },
          series: seriesData
        }
        option && myChart.setOption(option, true)
      })
    },
    async getZookeeperTop(index) {
      this.zookeeperTopList = []
      const obj = {cmFlag: this.tableData.cmFlag, clusterFlag: this.tableData.clusterFlag, serviceType: this.typeName, hourSum: this.zookeeperForm[index].hdfs, hourStartTime: this.zookeeperForm[index].value[0], hourEndTime: this.zookeeperForm[0].value[1]}
      parameter.getTargetTop(obj).then((res) => {
        res.forEach((item, num) => {
          for (const key in item) {
            this.zookeeperTopList.push({top: item[key]})
          }
          this.zookeeperForm[num].hdfsTop = this.zookeeperTopList[num].top
        })
      })
    }
  }
}
</script>
<style scoped>
.border-div {
  position: relative;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  border: 1px solid lightgray;
  border-radius: 15px;
  margin-bottom: 20px;
}
.box{
  display: flex;
}
.content{
  width: 25%;
}
.subTitle{
  font-size: 14px;
  font-weight: bold;
}
</style>
